<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上元每日出勤打卡click in、out</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #app{
        width: 1200px;
        height: 980px;
        margin: 0 auto;
        border:1px solid;
        text-align: center;
    }
    .box{
        display: flex;
        flex-flow: row wrap;
    }
    .box div{
        border: 1px solid blue;
        margin: 5px;
    }
</style>

      
<body>

    <div id="app">
        <!-- <div class="container"> -->
            <!-- <h1>{{responseData.className}}</h1> -->
            <!-- <img src="http://file.233863.com/upload/20210131/84b23fc37492432f81bcf148030ae84f.png" alt=""> -->
            <!-- <span>{{responseData.classCalers.teachName}}</span> -->
            <!-- <div class="box">
                <div v-for="item in responseData.classCalers">
                    <p>{{item.techDate}}</p>
                    <p>{{item.stuSignNum?'打卡完成':'未打卡'}}</p> -->
                    <!-- 传送后端的数据 -->
                    <!-- <p>{{item.calerId}}</p>
                </div>
            </div>
            
        </div> -->
        <button @click="getData">获取数据</button>
        <button @click="filterData">过滤数据</button>
        <button @click="oneClick">一键打卡</button>
    </div>


 

    <script>

        var app = new Vue({
            el:"#app",
            data:{
                token:[],
                // 返回打卡每天信息的数据
                responseData:[],
                // 过滤后未打卡的天数
                forgetList:[],
                personalInfo:[
                    {
                        // personalName:"马腾",
                        'username':"13032534360",
                        'passwd':"Marshal991010"
                    },
                    {
                        // personalName:"傅运龙",
                        'username':"18667184527",
                        'passwd':"fly940106"
                    },
                    {
                        // personalName:"王镇潇",
                        'username':"18362505634",
                        'passwd':"wzx970210"
                    },
                    {
                        // personalName:"熊智忍",
                        'username':"18705236370",
                        'passwd':"xzr990510"
                    },
                    {
                        // personalName:"周琪",
                        'username':"18379408224",
                        'passwd':"sy123456"
                    },
                    {
                        // personalName:"钱雁月",
                        'username':"13222422637",
                        'passwd':"sy123456"
                    },
                ],
            },
            created() {
                //1. 初始化登录获取后端返回的token值存入
                this.personalInfo.forEach((obj,index) => {    
                    axios.post('https://gate.shangyuanjiaoyu.com/oluc/v1/login/simple', 
                    obj).then(function (response) { 
                        // 会出现乱排序的情况token值不对应
                        // app.token.push(response);
                        app.token[index]=response;
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
                });
            },
            methods: {
                // 2.点击按钮获取未打卡的信息存入responseData中
                getData(){
                    //2.1 设置请求头中的token
                    
                    this.token.forEach((item,index)=>{
                        axios.interceptors.request.use(function(config){
                            config.headers.Authorization = item.data.data.token;
                            return config;
                        });

                        //2.2 获取个人打卡信息接口数据

                        axios.post('https://gate.shangyuanjiaoyu.com/olprod/v1/personal/class/query',{"classId": "157837234470913"}).then(response=>{
                            // 获取每天打卡的数组数据
                            // app.responseData[index]=response.data.data.classCalers;
                            app.responseData[index]=response;
                            console.log(index+"---------------");
                            console.log(response);
                        })
                    })

                   


                },
                filterData(){
                    console.log(app.responseData);
                     //2.3 先获取后端当天打卡之前的每天打卡的记录
                    // 进行判断，如果stuSignNum=1已经打卡，未打卡的进行记录    记录中包含
                    let timeStamp = getStamp();
                    console.log(timeStamp);
                    
                    console.log(app.responseData);
                    app.responseData.forEach((arr,position)=>{
                        // app.forgetList[position]=[];
                        console.log(arr);
                        console.log(app.forgetList);
                        arr.forEach((obj,index)=>{
                            // console.log("-----------"+index);
                            // 先获取时间毫秒进行比较
                            let t = obj.techDate+" "+obj.startTime;
                            let tStamp= (new Date(t)).getTime();
                            if(timeStamp>tStamp){
                                console.log(obj.calerId);
                            }
                            // 判断没有打卡的天数
                            if(timeStamp>tStamp&&obj.stuSignNum!==1){
                                console.log(obj);
                                app.forgetList[position].push({
                                    calerId: obj.calerId,
                                    startTime: obj.startTime,
                                    stuSignNum: obj.stuSignNum,
                                    techDate: obj.techDate
                                })
                            }
                        })
                    })
                    console.log(app.forgetList);
                },

                // 一键打卡
                oneClick(){

                    this.token.forEach((item,index)=>{
                        axios.interceptors.request.use(function(config){
                            config.headers.Authorization = item.data.data.token;
                            return config;
                        });

                        //3.一键打卡

                        axios.post('https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/sign',{"calerId": "157837234470913"}).then(response=>{
                            // 获取每天打卡的数组数据
                            app.responseData.push(response.data.data.classCalers);
                            console.log(index+"---------------");
                            console.log(response);
                        })
                    })



                }

            },

        });
        function getStamp(){
             // 获取当天的打卡记录事件
             var d = new Date();
            var day = d.getDate();
            var month = d.getMonth() + 1;
            var year = d.getFullYear();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second =d.getSeconds();
            month=month<10?'0'+month:month;
            day=day<10?'0'+day:day;
            hour=hour<10?'0'+hour:hour;
            minute=minute<10?'0'+minute:minute;
            second=second<10?'0'+second:second;
            let time = year+"-"+month+"-"+day+" "+ hour+":"+minute+":"+second;
            let stamp = (new Date(time)).getTime();
            return stamp;
        }






      /* 
      calerId: "157837236568124"
      classId: "157837234470913"
      startTime: "09:00:00"
      stuSignNum: 1
      techDate: "2021-07-01"
      */


        


        


            /* 
            calerId: "157837236568124"
            calerName: "课时1：web前端框架"
            classId: "157837234470913"
            className: "web前端框架20210701全日制007254"
            endTime: "12:00:00"
            liveRoomId: null
            platRoomId: null
            platformId: null
            rebackLength: null
            rebackState: 0
            rebackVideoIds: null
            rebackVideoList: null
            roomId: "1323690413260832"
            roomName: "腾飞二楼IT教室8"
            schoolId: "20"
            schoolName: null
            signNum: null
            startTime: "09:00:00"
            stuSignNum: 1
            subjectId: "1354480629055520"
            teachState: 0
            teacherId: "9216"
            teacherName: "钱曙光"
            techDate: "2021-07-01"
            techType: 1

            登录的接口https://gate.shangyuanjiaoyu.com/oluc/v1/login/simple
            {
            "retcode": 200,
            "msg": "请求成功",
            "data": {
                "uid": "156385579565057",
                "wxAuthed": 1,
                "cateId": "2059",
                "passAuthed": 1,
                "cateName": "淘宝电商",
                "username": "18667184527",
                "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTYzODU1Nzk1NjUwNTciLCJpYXQiOjE2MjcyMDY0MTQsImV4cCI6MTYyNzgxMTIxNH0.FlaWXdHCLVBzuVMlNJUpV-9JegMsq2fXYxkdkNr5CFSqSD9kZ3HJWdA0xtznug_-UXqF8H2U1o02GFxxTWmsyg"
            }
            }
            
            打卡接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/sign


            忘记签到的接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/caler/forget/query
            个人信息的接口
            https://gate.shangyuanjiaoyu.com/oluc/v1/user/info/query
            获取个人阶段课程的接口
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/prod/query

            获取阶段课程每天的情况数据
            {
            "classId": "157837234470913"
            }
            https://gate.shangyuanjiaoyu.com/olprod/v1/personal/class/query
            
            */
    </script>





   
</body>

</html>